<template>
<view>
	<view class="search">
		<u-search placeholder="艺术家姓名" v-model="keyword" shape="round" :clearabled="true" border-color="#cf3837"></u-search>
	</view>
	
		<view class="tab-bar">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#c6100e" height="80" bg-color="#f8f8f8" @change="change"></u-tabs>
		</view>
		
	<!-- 书法模块 -->
	<view class="list" v-if="current == 0">
		<view class="picture">
			<image src="../../static/007.jpg" mode=""></image>
		</view>
		<view class="detail">
			<view class="title">
				<text class="name">付洛红</text>
				<text class="check" @click="goToDetail">查看作品</text>
			</view>
			<view class="introduce">
				<text>毕业于中国艺术研究院研究生院蒋采萍工作室。中国工笔画学会会员,中国美协中国重彩画研究会会员，北京工笔重彩画会会员。现任教北京大学现代工笔…</text>
			</view>
			<view class="foot-bar">
				<text class="price">邀约价格:8000元/天</text>
				<view>
					<view type="error" class="btn" @click="goToOrder">邀约</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 国画模块 -->
	<view class="list" v-if="current == 1">
		<view class="picture">
			<image src="../../static/kn.jpg" mode=""></image>
		</view>
		<view class="detail">
			<view class="title">
				<text class="name">人类高质量前端</text>
				<text class="check" @click="goToDetail">查看作品</text>
			</view>
			<view class="introduce">
				<text>毕业于中国艺术研究院研究生院蒋采萍工作室。中国工笔画学会会员,中国美协中国重彩画研究会会员，北京工笔重彩画会会员。现任教北京大学现代工笔…</text>
			</view>
			<view class="foot-bar">
				<text class="price">邀约价格:8000元/天</text>
				<view>
					<view type="error" class="btn" @click="goToOrder">邀约</view>
				</view>
			</view>
		</view>
	</view>
	<diy-bottom-nav></diy-bottom-nav>
</view>
</template>

<script>
	export default {
		data(){
			return{
				list: [
					{
					name: '书法'
				  }, 
					{
					name: '国画',
				  }
				 ],
				 current: 0
			}
		},
		methods:{
			goToOrder(){
				uni.navigateTo({
					url:'./order/order'
				})
			},
			goToDetail(){
				uni.navigateTo({
					url:'./detail/detail'
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		width: 90%;
		margin: 5%;
	}
	
	.tab-bar {
		height: 80rpx;
	}
	
	.list {
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;
	}
	
 .picture image {
	  width: 200rpx;
	  height: 320rpx;
	  border-radius: 10rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
}

.detail {
	margin: 20rpx;
	border-bottom: 2rpx solid #E8E8E8;
	height: 320rpx;
}

.title {
	display: flex;
	justify-content: space-between;
}

.title .name {
	font-size: 32rpx;
	font-weight: 700;
}

.title .check {
	color: #e0b097;
	font-size: 28rpx;
	margin-right: 20rpx;
}

.introduce {
	color: #939393;
	font-size: 24rpx;
	text-align: justify;
	margin-top: 10rpx;
}

.foot-bar {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}

.foot-bar .price {
	font-size: 28rpx;
	font-weight: 700;
	color: #c91f1d;
}

.btn {
	width: 100rpx;
	height: 40rpx;
	font-size: 24rpx;
	background-color: #c6100e;
	color: #FFFFFF;
	text-align: center;
	line-height: 40rpx;
	border-radius: 120rpx;
}
</style>
